<template>
    <el-card class="box-card" shadow="never" v-loading="isLoading">
        <div slot="header" class="d-flex justify-content-between align-content-center">
            <span class="card_title">课程表</span>
            <span class="d-flex align-content-center">
            <el-button style="float: right; padding:0 5px "
                       @click="dialogVisible = true"
                       type="text" icon="fa fa-calendar-minus-o"> 直播日历</el-button>
            </span>
        </div>
        <div class="d-flex justify-content-between align-content-center study-box">
            <p class="study-box-sub-title">累计积分 <span class="core">25</span> 可兑换余额 <span class="core">0.69</span> 兑换奖励
            </p>
            <p class="study-box-sub-title">积分规则</p>
        </div>
        <div class=" study-desc">
            <div class="row">
                <div class="col text-center">
                    <p>今天已学课时</p>
                    <p><span class="minute">78</span>分钟</p>
                </div>
                <div class="col text-center">
                    <p>今天已学课时</p>
                    <p><span class="minute">78</span>分钟</p>
                </div>
                <div class="col text-center">
                    <p>今天已学课时</p>
                    <p><span class="minute">78</span>分钟</p>
                </div>
            </div>
            <div class="study-i-desc">
                再上21分钟可获得30积分
            </div>
        </div>
        <div class="row">
            <div class="col-4 class-study">
                <div class="class-study-item px-3">
                    <p>课程标题 </p>
                    <el-progress :stroke-width="stroke_width" :percentage="0"></el-progress>
                </div>
                <div class="class-study-bottom"><span></span></div>
            </div>
            <div class="col-4 class-study">
                <div class="class-study-item px-3">
                    <p>课程标题 </p>
                    <el-progress :stroke-width="stroke_width" :percentage="0"></el-progress>
                </div>
                <div class="class-study-bottom"><span></span></div>
            </div>
            <div class="col-4 class-study">
                <div class="class-study-item px-3">
                    <p>课程标题 </p>
                    <el-progress :stroke-width="stroke_width" :percentage="0"></el-progress>
                </div>
                <div class="class-study-bottom"><span></span></div>
            </div>
        </div>
        <div class="d-flex justify-content-between align-content-center study-box">
            <p class="study-box-title">当前任务</p>
            <p class="study-box-sub-title">学习进度 23%</p>
        </div>
        <template v-if="onTimeCoursesData.length > 0">
            <div class="course-view-box my-3">
            </div>
        </template>
        <template v-else>
                <div class="course-view-box my-3">
                    <div class="empty-courses">
                        <p class="empty-courses-title">今天没有课程。</p>
                    </div>

                </div>
        </template>

        <div class="d-flex justify-content-between align-content-center study-box">
            <p class="study-box-title">全部任务</p>
        </div>
        <template v-if="coursesData.length > 0">
        <div class="course-view-box my-3">
            <div class="accordion" id="coursesData">
                <div class="card" v-for="(items,index) in coursesData">
                    <div class="card-header" :id="'course-heading'+index">
                        <h5 class="mb-0">
                            <button :class="['btn', 'btn-link', 'course-view-item' ,{collapsed:index>0}]" type="button" data-toggle="collapse"
                                    :data-target="'#course-collapse'+index" aria-expanded="true" :aria-controls="'#course-collapse'+index">
                                <p><span class="course-view-round-p">{{index+1}}</span>{{items.name}}</p>
                            </button>
                        </h5>
                    </div>
                    <div :id="'course-collapse'+index" :class="['collapse',{show:index === 0}]" :aria-labelledby="'#course-heading'+index"
                         data-parent="#coursesData">
                        <div class="card-body py-0">
                            <ul class="list-group lessons-list list-group-flush">
                                <li v-for="item in items.lessons" class="list-group-item d-flex justify-content-between align-items-center">
                                    <div class="lessons-title">
                                        <img class="lessons-play"
                                             src="http://cdn.www.bright-tech.cn/PeiYouCe/24e2cb77234f1978986c7740bf76c105/cg72UKdsAJFFw9c3jhXf6UvVCVDXIDKZUyMzkizJ.png"
                                             alt="">
                                        <span><p class="lessons-name">{{item.name}}</p><p class="lessons-time">{{item.start_time}}</p></span>
                                    </div>
                                    <template v-if="item.status === 'ready'">
                                    <span class="primary-desc">直播未开始</span>
                                    </template>
                                    <template v-else-if="item.status === 'live'">
                                    <a target="_blank" :href="'/live/broadcast/'+item.id">
                                        <span class="btn btn-outline-primary">观看直播</span>
                                    </a>
                                    </template>
                                    <template v-else>
                                        <a target="_blank" :href="'/live/play/'+item.id">
                                            <span class="btn btn-outline-primary">观看回放</span>
                                        </a>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </template>
        <template v-else>
            <div class="course-view-box my-3">
                <div class="empty-courses">
                    <p class="empty-courses-title">您还没有课程。</p>
                </div>
            </div>
        </template>
        <el-dialog
                class="calender-dialog"
                :visible.sync="dialogVisible"
                width="45%"
                :before-close="closeDialog">
            <div slot="title">
                <p class="calendar-title">直播日历 <span>今天 : {{startDate}}</span></p>
            </div>
            <calendar mode="week" :dateData="calendarData" height="700"
                      :startDate="startDate" width="100%" locale="zh-cn"
                      :renderHeader="renderHeader">
                <div :class="['calendar-item']"
                     slot-scope="items">
                    <div :class="['calendar-item-day',{ 'is-today': items.isToday }]">
                        {{items.date.date}}
                    </div>
                    <template v-if="items.data[0]">
                    <template v-for="item in items.data[0].items">
                        <div class="calendar-item-box">
                            <span class="calendar-item-time">{{item.datetime}}</span>
                            <div class="calendar-item-name">{{item.title}}</div>
                        </div>
                    </template>
                    </template>
                </div>
            </calendar>
        </el-dialog>
    </el-card>
</template>
<script>
    import UserApi from '@/api/user'
  export default {
    data: function () {
      return {
        stroke_width: 2,
        dialogVisible: false,
        startDate: new Date().Format('yyyy-MM-dd'),
        calendarData: [],
        coursesData:[],
        isLoading:true,
        onTimeCoursesData:[],
      }
    },
    created () {
      Promise.all([
        UserApi.getUserLessonsCalendar(),
        UserApi.getUserCourses(),
        UserApi.getUserCourses({is_onTime:true}),
      ]).then(([calendarResponse, coursesResponse,onTimeCoursesResponse]) => {
        this.calendarData = calendarResponse.data
        this.coursesData = coursesResponse.data.data
        this.onTimeCoursesData = onTimeCoursesResponse.data.data
        this.isLoading = false
    }).catch((error) => {
        this.isLoading = false
    })
    },
    methods: {
      closeDialog (done) {
        done()
      },
      renderHeader ({prev, next, selectedDate}) {
        const h = this.$createElement

        const prevButton = h('div', {
          class: ['header-button','fa','fa-angle-left'],
          on: {
            click: prev,
          },
        }, [''])
        const select = h('div', {
          class: ['header-date'],
        }, [selectedDate])
        const nextButton = h('div', {
          class: ['header-button','fa','fa-angle-right'],
          on: {
            click: next,
          },
        }, [''])
        return h('div', {class: ['calendar-header']}, [prevButton, select, nextButton])
      },
    },
  }
</script>
<style lang="scss">
    .el-dialog__header {
        border-top: 8px solid #2D71AD;
    }

    .el-dialog__body {
        padding: 0;
    }
</style>